<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
	<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<script src="../js/jquery-3.3.1.min.js"></script>
		<script src="../js/jquery.cookie.js"></script>
		<title>Insert title here</title>
		<style>
			#itemmes{
				background-color:lemonchiffon; 
				border: solid 1px #000;
				margin: 0px;
				padding: 0px;
			}
			#itemmes p{
				background-color:lemonchiffon; 
				size: 28px;
				margin: 0px;
				padding: 0px;
			}
			.mesc{
				font-size: 36px;
				margin: 0px;
				padding: 0px;
			}
			
		</style>
	</head>

	<body>
		<form id="myform" action="${pageContext.request.contextPath}/UserLoginServlet.do" method="post">
			<p>
				<input type="text" name="username" placeholder="请输入账号" />
			</p>
			<p>
				<input type="password" name="password" placeholder="请输入密码" />
			</p>
			<p>
				<input type="button" value="登  录" id="submit" />
			</p>
		</form>


		<!-- <button id="btn">连接websocket</button>
	<input type="text" id="text">
	<input type="button" id="send" value="发送"> -->
		<p>选择好友发送消息
			<select id='hul'>
			</select>
		</p>
		<p>
			消息：<input type="text" id="text">
			好友id：<input type="text" id="faluid">
			<input type="button" id="send" value="发送">
		</p>

		<div id="textmess">

		</div>


		<script>
			$(function () {
				//用户点击登录的时候，发送请求验证用户名密码
				$('#submit').click(function () {
					$.post("/JSPing/UserLoginServlet.do", $('#myform').serialize(),
						function (data, textStatus, jqXHR) {
							//用户名密码正确时，发送请求获取好友列表
							if (data) {
								//获取好友列表
								getHailFellow();
								//建立ws连接
								openWS();
							} else {
								alert("密码错误！");
							}
						}
					);
				});
				//获取好友列表
				function getHailFellow() {
					var uid = $.cookie('uid');
					$.post('/JSPing/HailFellowServlet', 'id=' + uid, function (data) {
						var $hul = $('#hul');
						$(data).each(function (index, item) {
							var option = "<option id='item' data-id=" + item.uid + ">" + item.uname + "</option>";
							$hul.append(option);
						});
					}, 'json');
				}

				var ws = null;
				//建立连接
				function openWS(){
					var uid = $.cookie('uid');
					ws = new WebSocket('ws://' + window.location.host + '/JSPing/websocket/' + uid);
					
					ws.onopen = function () {
						addMag('系统','现在','连接成功');
					};
					ws.onmessage = function (msg) {
						var jsonmes = JSON.parse(msg.data);
						addMag(jsonmes.fuid,jsonmes.time,jsonmes.msg);
						console.log(msg.data);
					}
					ws.onclose = function (mess) {
						addMag('系统','现在','断开连接');
					}
				}

				$('#send').click(function () {
					var mess = $('#text').val();
					var id = $('#faluid').val();
					
					var jme = "{\"fuid\":\""+id+"\",\"msg\":\""+mess+"\",\"time\":\"2018-04-20\"}";


					ws.send(jme);
				});
				//添加一条消息
				function addMag(id='默认',time='默认',mess='默认消息'){
					
					var name = '';

					$('option').each(function(index,item){
						if($(item).attr('data-id')==id){
							name = $(item).text();
						}
					});

					var me = "<div id='itemmes'><p>发送的人:"+name+"；时间:"+time+"</p><p class='mesc'>"+mess+"</p></div>";
					$("#textmess").append(me);
				}


			});
		</script>

	</body>

	</html>